<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 10px solid red;
        padding: 10px;
        overflow: auto;
    }
</style>
<body>
<div>
    我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
    我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
</div>

<script>
    /**
     * scroll系列相关属性可以动态的得到该属性的大小、滚动距离
     * @type {HTMLDivElement}
     */
    var div = document.querySelector('div');

    // scroll滚动事件, 当我们滚动条发生变化会触发的事件
    div.addEventListener('scroll', function () {
        // 返回 被卷去的上侧距离, 返回数值不带单位          是个变化的值
        console.log(`div.scrollTop: ${div.scrollTop}`)

        // 返回自身实际的高度, 不含边框, 返回数值不带单位,   是个定值
        console.log(`div.scrollHeight: ${div.scrollHeight}`)
    })
</script>
</body>
</html>
